<script setup lang="ts" name="SystemRole">
import { getFloorList } from '@/api/energyWatch/power'
import { Search, } from "@element-plus/icons-vue"
import type { ElTree } from 'element-plus'
import { useLayoutConfigStore } from "@/store/layoutConfig"

// 定义状态
const state = reactive({
  loading: false,
  query: {
    dateRange: [],
    dataType: '月报',
  } as EnergyPowerAnalysisQuery,
  treeList: [] as EnergyPowerTree[],
  lastDay: {
    loading: false,
    xAxisData: [] as string[],
    data: [] as any[]
  },
  last7Days: {
    loading: false,
    xAxisData: [] as string[],
    data: [] as any[]
  },
  last30Days: {
    loading: false,
    xAxisData: [] as string[],
    data: [] as any[]
  },
  last365Days: {
    loading: false,
    xAxisData: [] as string[],
    data: [] as any[]
  },
});

const { loading, query, treeList } = { ...toRefs(state) };

/** 搜索日期的类型 */
const dataTypeOptions = reactive<Options[]>([
  {
    label: '周报',
    value: '1'
  },
  {
    label: '日报',
    value: '2'
  },
  {
    label: '月报',
    value: '3'
  },
  {
    label: '年报',
    value: '4'
  }
])

/**
 * 获取主题
 */
const layoutConfig = useLayoutConfigStore()
const theme = computed(() => layoutConfig.isDrak ? 'dark' : '')
// 图标背景，transparent：透明
const bgColor = computed(() => layoutConfig.isDrak ? 'transparent' : '')

onMounted(() => {
  getFloorTree()
});

// 点击查询
function handleQuery() {
}

/**
 * 楼层树结构
 */
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
async function getFloorTree() {
  try {
    state.loading = true
    const { data } = await getFloorList()
    console.log('getFloorTree', data);
    state.treeList = data.records
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

/** 过滤树 */
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const defaultProps = {
  children: 'children',
  label: 'label',
}

interface Tree {
  [key: string]: any
}
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

function handleNodeClick(data: any) {
  // console.log('选择项目', data);
  const floorId = data.id
  console.log('选择项目', floorId);
}

/** 改变echart图形的样式 */
const changeEchart = (val: string) => {
  console.log('改变echart图形的样式', val);

}
</script>

<template>
  <div class="page-aside-nav">
    <div class="tab-aside">
      <div class="tab-aside-header">
        <span>航顺项目</span>
      </div>
      <div class="tab-aside-search">
        <el-input v-model="filterText" placeholder="搜索关键字" />
      </div>
      <el-tree ref="treeRef" class="filter-tree" v-loading="loading" :data="treeList" :props="defaultProps"
        default-expand-all node-key="id" :filter-node-method="filterNode" show-checkbox @node-click="handleNodeClick">
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <SvgIcon :name="data.icons"></SvgIcon>
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <div class="tab-container">
      <div class="tab-container-header">
        <div class="tab-container-header-search">
          <el-form inline :model="query">
            <el-form-item>
              <el-select-v2 v-model="query.dataType" clearable filterable :options="dataTypeOptions"
                style="width: 200px;" />
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="query.dateRange" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain :icon="Search" @click="handleQuery()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="tab-container-header-echart">
          <div class="header-echart" @click="changeEchart('ployline')">
            <el-tooltip content="折线图" placement="top-start">
              <SvgIcon name="ployline" width="20" height="20"></SvgIcon>
            </el-tooltip>
          </div>
          <div class="header-echart" @click="changeEchart('pie')">
            <el-tooltip content="饼图" placement="top-start">
              <SvgIcon name="pie" width="20" height="20"></SvgIcon>
            </el-tooltip>
          </div>
          <div class="header-echart" @click="changeEchart('barGraph')">
            <el-tooltip content="累积图" placement="top-start">
              <SvgIcon name="barGraph" width="20" height="20"></SvgIcon>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="tab-container-echart">
        <LineChart title="月电量" :xAxisData="state.last30Days.xAxisData" :data="state.last30Days.data" :theme="theme"
          :bgColor="bgColor">
        </LineChart>
      </div>
    </div>
  </div>
</template>

<style scoped land="scss">
.tab-container-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}

/* 隐藏一级节点复选框 */
:deep(.filter-tree > .el-tree-node > .el-tree-node__content > .el-checkbox) {
  display: none;
}

/* 隐藏第二级节点复选框 */
:deep(.filter-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox) {
  display: none;
}

/* 隐藏第三级节点复选框 */
/* :deep(.filter-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox ) {
  display: none;
} */
</style>